<template>
  <div>
    <div class="rule-header"><h1>违规投诉</h1></div>
    <div class="rule-header-button">
      <el-button
        type="success"
        style="width: 100px; height: 40px; margin-left: 30px"
        @click="dialogVisible = true"
      >
        去投诉</el-button
      >
    </div>
    <div class="rule-main">
      <div class="pointer">
        <template>
          <el-table
            ref="tableRef"
            row-key="date"
            :data="list"
            style="width: 90%; margin-left: 50px; margin-top: 20px"
          >
            <el-table-column
              align="center"
              prop="date"
              label="序号"
              width="150"
              type="index"
            />
            <el-table-column prop="title" label="投诉标题" width="680" />
            <el-table-column
              prop="creationTime"
              label="创建时间"
              align="center"
              width="200"
            >
              <template slot-scope="scope">
                <div style="margin-left: -10px">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 12px">{{
                    scope.row.creationTime
                  }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="处理状态"
              width="200"
              :filters="[
                { text: '正在处理中', value: '0' },
                { text: '处理完成', value: '1' },
              ]"
              :filter-method="filterTag"
            >
              <template #default="scope">
                <span
                  :style="
                    scope.row.complaintType === 0
                      ? 'color:orange'
                      : 'color:black;'
                  "
                  >{{
                    scope.row.complaintType === 0 ? "正在处理中" : "处理完成"
                  }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="操作" label="操作" width="170">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="goToDetail(scope.row)"
                  >查看</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      title="投诉"
      width="700px"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleForm"
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item label="投诉标题" prop="title">
          <el-input
            v-model="ruleForm.title"
            type="text"
            placeholder="请输入投诉标题"
          />
        </el-form-item>
        <el-form-item label="投诉内容" prop="complaintText">
          <el-input
            v-model="ruleForm.complaintText"
            type="textarea"
            placeholder="请输入投诉内容"
          />
        </el-form-item>
        <el-form-item label="联系人" prop="contactPerson">
          <el-input
            v-model="ruleForm.contactPerson"
            placeholder="请输入联系人"
          />
        </el-form-item>
        <el-form-item label="联系人电话" prop="contactNumber">
          <el-input
            v-model="ruleForm.contactNumber"
            placeholder="请输入联系人电话"
          />
        </el-form-item>
        <el-form-item>
          <div style="margin-left: 300px; margin-top: 30px">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="submitSucess(ruleForm)">
              发起投诉
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>


<script>
import {
  getinobserveList,
  addinobserve,
} from "@/api/inobserverule/inobserverule";
export default {
  name: "inobserverule",
  data() {
    return {
      ruleForm: {
        title: "",
        complaintText: "",
        contactPerson: "",
        contactNumber: "",
      },
      rules: {
        title: [{ required: true, message: "请输入投诉标题", trigger: "blur" }],
        complaintText: [
          { required: true, message: "请输入投诉内容", trigger: "blur" },
        ],
        contactPerson: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        contactNumber: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
        ],
      },
      dialogVisible: false,
      list: [],
      pageIndex: 1,
      total: 0,
      pageSize: 10,
    };
  },
  methods: {
    handleClose() {
      // 重置表单
      this.$refs.ruleForm.resetFields();
      // 关闭对话框
      this.dialogVisible = false;
    },
    submitSucess() {
      // 校验
      this.$refs.ruleForm.validate((ok) => {
        if (ok) {
          // 提交数据新增
          addinobserve(this.ruleForm).then((res) => {
            // console.log(res);
            this.getinobserveList();
          });
          // 然后再调用数据刷新
          this.$message({
            message: "发起投诉成功！",
            type: "success",
          });
          this.handleClose();
        } else {
          this.$message({
            message: "投诉失败，请检查投诉内容！",
            type: "error",
          });
          return false;
        }
      });
      // 添加值
      // 提示消息

      // 调用关闭
    },
    // 处理状态
    filterTag(value, row) {
      return row.complaintType == value;
    },
    // 点击查看跳转详情
    goToDetail(row) {
      this.$router.push({
        name: "inobserveresult",
        query: {
          complaintId: row.complaintId,
        },
      });
    },
    // 获取投诉列表数据
    async getinobserveList() {
      const res = await getinobserveList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      });
      // console.log(res);
      this.list = res.data;
      this.total = res.total;
      // console.log(this.list);
    },
  },
  mounted() {
    this.getinobserveList();
  },
};
</script>

<style scoped>
.rule-header {
  text-align: center;
}
.rule-main {
  text-align: center;
  height: 600px;
}
</style>
